<script setup lang="ts">
import { onMounted, type Component } from 'vue'
import Navigation from '@/components/Navigation.vue'

import { Users, Target, Heart, Award, Calendar, MapPin, Mail, Linkedin } from 'lucide-vue-next'
import AOS from 'aos'
import 'aos/dist/aos.css'

// 团队成员数据
interface TeamMember {
  id: number
  name: string
  position: string
  avatar: string
  bio: string
  skills: string[]
  social?: {
    email?: string
    linkedin?: string
  }
}

const teamMembers: TeamMember[] = [
  {
    id: 1,
    name: '张明',
    position: '创始人 & 技术总监',
    avatar:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20male%20developer%20portrait%20with%20modern%20style&image_size=square',
    bio: '拥有8年前端开发经验，专注于现代化Web技术栈。曾在多家知名互联网公司担任技术负责人，对产品设计和用户体验有深刻理解。',
    skills: ['Vue.js', 'React', 'Node.js', '架构设计'],
    social: {
      email: 'zhang.ming@firefly-studio.com',
      linkedin: 'https://linkedin.com/in/zhangming'
    }
  },
  {
    id: 2,
    name: '李雅',
    position: 'UI/UX设计师',
    avatar:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20female%20designer%20portrait%20with%20creative%20style&image_size=square',
    bio: '5年设计经验，擅长用户体验设计和视觉设计。曾为多个知名品牌设计产品界面，注重设计的实用性和美观性的完美结合。',
    skills: ['UI设计', 'UX研究', 'Figma', '品牌设计'],
    social: {
      email: 'li.ya@firefly-studio.com'
    }
  },
  {
    id: 3,
    name: '王强',
    position: '全栈开发工程师',
    avatar:
      'https://trae-api-sg.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20male%20fullstack%20developer%20portrait%20with%20tech%20style&image_size=square',
    bio: '6年全栈开发经验，精通前后端技术栈。在移动应用开发和数据库设计方面有丰富经验，善于解决复杂的技术难题。',
    skills: ['React Native', 'Python', 'MongoDB', 'DevOps'],
    social: {
      email: 'wang.qiang@firefly-studio.com',
      linkedin: 'https://linkedin.com/in/wangqiang'
    }
  }
]

// 工作室历程数据
interface Milestone {
  year: string
  title: string
  description: string
  // 使用 Vue 组件类型，避免使用 any
  icon: Component
}

const milestones: Milestone[] = [
  {
    year: '2022',
    title: '工作室成立',
    description: '火叶工作室正式成立，开始为客户提供专业的数字化解决方案',
    icon: Target
  },
  {
    year: '2022',
    title: '首个重大项目',
    description: '成功完成首个企业级项目，获得客户高度认可，奠定了工作室的技术基础',
    icon: Award
  },
  {
    year: '2023',
    title: '团队扩张',
    description: '团队规模扩大到3人，涵盖前端、后端、设计等多个专业领域',
    icon: Users
  },
  {
    year: '2023',
    title: '技术突破',
    description: '在移动应用开发和用户体验设计方面取得重大突破，服务质量显著提升',
    icon: Heart
  },
  {
    year: '2024',
    title: '持续发展',
    description: '累计完成50+项目，服务30+客户，在行业内建立了良好的口碑和品牌影响力',
    icon: Target
  }
]

// 企业价值观
const values = [
  {
    title: '技术驱动',
    description: '始终保持对新技术的敏感度，用最先进的技术为客户创造价值',
    icon: '🚀'
  },
  {
    title: '用户至上',
    description: '以用户体验为核心，每一个设计决策都以提升用户满意度为目标',
    icon: '❤️'
  },
  {
    title: '品质保证',
    description: '严格的质量控制流程，确保每一个交付的产品都达到最高标准',
    icon: '⭐'
  },
  {
    title: '持续创新',
    description: '不断探索新的解决方案，为客户提供具有竞争优势的产品',
    icon: '💡'
  }
]

onMounted(() => {
  // 初始化AOS动画库
  AOS.init({
    duration: 800,
    easing: 'ease-out-cubic',
    once: true,
    offset: 100
  })
})
</script>

<template>
  <div
    class="min-h-screen relative bg-white dark:bg-black text-gray-900 dark:text-white transition-colors duration-300"
  >
    <!-- 导航栏 -->
    <Navigation />

    <!-- 页面头部 -->
    <section
      class="pt-24 pb-12 bg-gradient-to-br from-gray-50 via-gray-100 to-gray-50 dark:from-black dark:via-gray-900 dark:to-black relative overflow-hidden"
    >
      <!-- 科技感背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-10" />
      <div
        class="absolute top-10 left-10 w-32 h-32 bg-primary-400/20 rounded-full blur-3xl animate-pulse-slow"
      />
      <div
        class="absolute bottom-10 right-10 w-40 h-40 bg-accent-400/20 rounded-full blur-3xl animate-float"
      />
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div data-aos="fade-up">
          <h1 class="text-4xl lg:text-6xl font-bold mb-6">
            关于
            <span class="gradient-text">火叶工作室</span>
          </h1>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            我们是一支充满激情的技术团队，用创新和专业为客户点燃数字化转型的火花
          </p>
        </div>
      </div>
    </section>

    <!-- 工作室介绍 -->
    <section class="py-20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-16 items-center">
          <div data-aos="fade-right">
            <h2 class="text-3xl lg:text-4xl font-bold mb-8">
              我们的
              <span class="gradient-text">故事</span>
            </h2>
            <div class="space-y-6 text-lg text-gray-600 dark:text-gray-300 leading-relaxed">
              <p>
                火叶工作室诞生于2022年，源于几位技术爱好者对数字化创新的共同追求。
                我们相信技术的力量能够改变世界，每一行代码都承载着我们对完美的执着追求。
              </p>
              <p>
                从最初的小团队到现在的专业工作室，我们始终坚持以客户需求为导向，
                以技术创新为驱动，为每一位客户提供量身定制的数字化解决方案。
              </p>
              <p>
                我们不仅仅是代码的编写者，更是客户数字化转型路上的伙伴。
                我们用专业的技术能力和丰富的项目经验，帮助客户在数字化时代中脱颖而出。
              </p>
            </div>
          </div>

          <div
            data-aos="fade-left"
            class="relative"
          >
            <div class="grid grid-cols-2 gap-6">
              <div
                class="bg-gradient-to-br from-primary-400/20 to-primary-600/20 p-6 rounded-2xl border border-primary-400/30 glow-effect"
              >
                <div class="text-3xl font-bold text-primary-500 mb-2">50+</div>
                <div class="text-gray-600 dark:text-gray-300">完成项目</div>
              </div>
              <div
                class="bg-gradient-to-br from-accent-400/20 to-accent-600/20 p-6 rounded-2xl border border-accent-400/30 mt-8 glow-effect"
              >
                <div class="text-3xl font-bold text-accent-500 mb-2">30+</div>
                <div class="text-gray-600 dark:text-gray-300">满意客户</div>
              </div>
              <div
                class="bg-gradient-to-br from-cyber-400/20 to-cyber-600/20 p-6 rounded-2xl border border-cyber-400/30 glow-effect"
              >
                <div class="text-3xl font-bold text-cyber-500 mb-2">2年</div>
                <div class="text-gray-600 dark:text-gray-300">服务经验</div>
              </div>
              <div
                class="bg-gradient-to-br from-primary-400/20 to-accent-600/20 p-6 rounded-2xl border border-primary-400/30 mt-8 glow-effect"
              >
                <div class="text-3xl font-bold text-primary-500 mb-2">100%</div>
                <div class="text-gray-600 dark:text-gray-300">客户满意度</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 团队介绍 -->
    <section class="py-20 bg-gray-100/50 dark:bg-gray-900/30 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="text-center mb-16"
          data-aos="fade-up"
        >
          <h2 class="text-3xl lg:text-4xl font-bold mb-6">
            我们的
            <span class="gradient-text">团队</span>
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            每一位团队成员都是各自领域的专家，我们用专业和热情为客户创造价值
          </p>
        </div>

        <div class="grid md:grid-cols-3 gap-8">
          <div
            v-for="(member, index) in teamMembers"
            :key="member.id"
            class="group bg-white/80 dark:bg-gray-900/50 p-8 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-primary-400/50 transition-all duration-300 hover:transform hover:scale-105 backdrop-blur-sm shadow-lg hover:shadow-xl glow-effect"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <!-- 头像 -->
            <div class="relative mb-6">
              <img
                :src="member.avatar"
                :alt="member.name"
                class="w-24 h-24 rounded-full mx-auto object-cover border-4 border-gray-300 dark:border-gray-700 group-hover:border-primary-400 transition-colors"
              />
              <div
                class="absolute inset-0 w-24 h-24 rounded-full mx-auto bg-primary-400/20 opacity-0 group-hover:opacity-100 transition-opacity"
              />
            </div>

            <!-- 基本信息 -->
            <div class="text-center mb-6">
              <h3 class="text-xl font-bold mb-2 group-hover:text-primary-500 transition-colors">
                {{ member.name }}
              </h3>
              <p class="text-primary-500 font-medium mb-4">
                {{ member.position }}
              </p>
              <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                {{ member.bio }}
              </p>
            </div>

            <!-- 技能标签 -->
            <div class="mb-6">
              <div class="flex flex-wrap gap-2 justify-center">
                <span
                  v-for="skill in member.skills"
                  :key="skill"
                  class="px-3 py-1 bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-xs rounded-full group-hover:bg-primary-400/20 group-hover:text-primary-500 transition-colors"
                >
                  {{ skill }}
                </span>
              </div>
            </div>

            <!-- 社交链接 -->
            <div
              v-if="member.social"
              class="flex justify-center gap-4"
            >
              <a
                v-if="member.social.email"
                :href="`mailto:${member.social.email}`"
                class="text-gray-500 dark:text-gray-400 hover:text-primary-500 transition-colors"
              >
                <Mail class="w-5 h-5" />
              </a>
              <a
                v-if="member.social.linkedin"
                :href="member.social.linkedin"
                target="_blank"
                class="text-gray-400 hover:text-green-400 transition-colors"
              >
                <Linkedin class="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 工作室历程 -->
    <section class="py-20">
      <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="text-center mb-16"
          data-aos="fade-up"
        >
          <h2 class="text-3xl lg:text-4xl font-bold mb-6">
            我们的
            <span class="gradient-text">发展历程</span>
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300">
            从初创到成长，每一个里程碑都见证着我们的进步与成就
          </p>
        </div>

        <!-- 时间线 -->
        <div class="relative">
          <!-- 时间线主线 -->
          <div
            class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary-400 to-primary-600"
          />

          <div class="space-y-12">
            <div
              v-for="(milestone, index) in milestones"
              :key="index"
              :class="[
                'relative flex items-center',
                index % 2 === 0 ? 'justify-start' : 'justify-end'
              ]"
              data-aos="fade-up"
              :data-aos-delay="index * 100"
            >
              <!-- 时间线节点 -->
              <div
                class="absolute left-1/2 transform -translate-x-1/2 w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center border-4 border-white dark:border-black z-10 glow-effect"
              >
                <component
                  :is="milestone.icon"
                  class="w-6 h-6 text-white dark:text-black"
                />
              </div>

              <!-- 内容卡片 -->
              <div
                :class="[
                  'w-5/12 bg-white/80 dark:bg-gray-900/50 p-6 rounded-2xl border border-gray-200 dark:border-gray-800 backdrop-blur-sm shadow-lg glow-effect',
                  index % 2 === 0 ? 'mr-auto' : 'ml-auto'
                ]"
              >
                <div class="flex items-center mb-3">
                  <Calendar class="w-4 h-4 mr-2 text-primary-500" />
                  <span class="text-primary-500 font-bold">{{ milestone.year }}</span>
                </div>
                <h3 class="text-xl font-bold mb-3">
                  {{ milestone.title }}
                </h3>
                <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                  {{ milestone.description }}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化 -->
    <section class="py-20 bg-gray-100/50 dark:bg-gray-900/30 backdrop-blur-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div
          class="text-center mb-16"
          data-aos="fade-up"
        >
          <h2 class="text-3xl lg:text-4xl font-bold mb-6">
            我们的
            <span class="gradient-text">价值观</span>
          </h2>
          <p class="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            这些价值观指导着我们的每一个决策，塑造着我们的企业文化
          </p>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          <div
            v-for="(value, index) in values"
            :key="value.title"
            class="text-center group"
            data-aos="fade-up"
            :data-aos-delay="index * 100"
          >
            <div
              class="bg-white/80 dark:bg-gray-900/50 p-8 rounded-2xl border border-gray-200 dark:border-gray-800 hover:border-primary-400/50 transition-all duration-300 hover:transform hover:scale-105 backdrop-blur-sm shadow-lg hover:shadow-xl glow-effect"
            >
              <div class="text-4xl mb-4 group-hover:scale-110 transition-transform">
                {{ value.icon }}
              </div>
              <h3 class="text-xl font-bold mb-4 group-hover:text-primary-500 transition-colors">
                {{ value.title }}
              </h3>
              <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
                {{ value.description }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系我们CTA -->
    <section
      class="py-20 bg-gradient-to-r from-primary-400/10 to-primary-600/10 relative overflow-hidden"
    >
      <!-- 科技感背景装饰 -->
      <div class="absolute inset-0 bg-cyber-grid opacity-5" />
      <div
        class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8"
        data-aos="fade-up"
      >
        <h2 class="text-3xl lg:text-4xl font-bold mb-6">想要了解更多？</h2>
        <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
          我们很乐意与您分享更多关于火叶工作室的故事
        </p>
        <router-link
          to="/contact"
          class="inline-flex items-center gap-2 bg-primary-500 hover:bg-primary-600 text-white px-8 py-4 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 glow-effect"
        >
          <MapPin class="w-5 h-5" />
          联系我们
        </router-link>
      </div>
    </section>
  </div>
</template>
